<template>
    <view style="height: 100%">
        <view class="pay-page">
            <view class="pay-page__head flex-column-center">
                <view class="head-title">支付金额</view>
                <view class="head-price">
                    ￥
                    <text>{{ payleMemberDetail.payLevelPrice }}</text>
                </view>
            </view>

            <view class="pay-page__types">
                <view class="types-title flex-row-between">
                    <view>支付方式</view>
                    <view class="topay flex-row-start" @tap="rechargeVisible">
                        去充值
                        <view class="arrows_r"></view>
                    </view>
                </view>
                <view class="types-list">
                    <!-- <view class="list-item flex-row-between" bindtap="changePayType" data-type ='0'>
                <view class="item-left flex-row-start">
                    <image class="item-icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/pay-icon1.png"></image>
                    <view class="item-title flex-row-start">
                        <view>微信支付</view>
                    </view>
                </view>
                <view class="radio {{payType==0 && 'on'}}"></view>
            </view> -->
                    <view class="list-item flex-row-between" @tap="changePayType" data-type="0" v-if="accountInfo.accountBalance">
                        <view class="item-left flex-row-start">
                            <image class="item-icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/pay-icon2.png"></image>
                            <view class="item-title flex-row-start">
                                <view>余额支付</view>
                                <view class="flex-row-start">
                                    （可用
                                    <text class="price">
                                        <text>￥</text>
                                        {{ accountInfo.accountBalance }}
                                    </text>
                                    ）
                                </view>
                            </view>
                        </view>
                        <view :class="'radio ' + (payType == 0 && 'on')"></view>
                    </view>
                </view>
            </view>
        </view>
        <view class="pay-btn-wrap">
            <view class="pay-btn flex-row-center" @tap="toPaySuccess">立即支付</view>
        </view>

        <!-- <u-popup :show="showRecharge" closeable custom-style="width:702rpx;height:500rpx;border-radius: 16rpx;padding:30rpx 0rpx 33rpx 32rpx;" @close="rechargeVisible">
            <Payment :showTips="false" @getbalance="getAccountInfo"></Payment>
        </u-popup> -->
    </view>
</template>

<script lang="ts">
// import zpMixins from '@/uni_modules/zp-mixins/index';
// import vanPopup from './@vant/weapp/popup/index';
// import Payment from '@/components/payment/payment';
// marketing/pages/member/pay_page/pay_page.ts
	import {
		deleteSaveBuy,
		saveBuy
	} from '@/api/marketing/vip'
import { purchaseMembe, getAccountInfo } from '../../../../api/https';
import { openPayleMember } from '../../../../api/marketing/payMember';
import { verifyPayStatus } from '../../../../api/marketing/marketing';
export default {
    components: {
        // vanPopup,
        // Payment
    },
    data() {
        return {
            accountInfo: {
                accountBalance: ''
            },

            payleMemberDetail: {
                payLevelPrice: ''
            },

            payType: '0',
            showRecharge: false,
            options: '',
			save:''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options: any) {
        if (options.data) {
            this.setData({
                options
            });
        }
		if(options.save){
			this.save=JSON.parse(decodeURIComponent(options.save))
		}
		console.log(this.save)
        this.getPayleMemberDetail();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
		 this.getAccountInfo();
	},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        bindgetbalance() {
            console.log(123456);
        },

        getPayleMemberDetail() {
            if (this.options.data) {
                this.setData({
                    payleMemberDetail: JSON.parse(decodeURIComponent(this.options.data))
                });
            }
            console.log('111', this.payleMemberDetail)
        },

        rechargeVisible() {
            uni.navigateTo({
            	url:'/mine/pages/recharge/recharge'
            })
        },

        async purchaseMembe() {
            let { payLevelDuration, payLevelPrice, payLevelId } = this.payleMemberDetail;
            try {
                // 支付前调用
                const beForRes = await verifyPayStatus({
                    buyLevelId: payLevelId,
                    inMember: this.save.inMember,
                    outTradeStatus: 1,
                    sellerId: getApp().globalData.sellerId
                });
                if (beForRes.code == 200) {
                    uni.hideLoading()
                    const res = await purchaseMembe({
                        memberId: uni.getStorageSync('memberId'),
                        renewalMonth: payLevelDuration,
                        payAmount: -payLevelPrice * 100,
                        memberLevel: payLevelId,
                        permanentMember: payLevelDuration == -1 ? 1 : 2,
                        //1永久会员 2,非永久会员
                        sellerId: getApp().globalData.sellerId,

                        // 后端去掉营销获客接口通知
                        buyLevelId: payLevelId,
                        marketToken: uni.getStorageSync('token'),
                    });
                    if (res.code == 0) {
                        uni.navigateTo({
                            url: '../pay_success/pay_success'
                        });

                        // let data = {
                        //     buyLevelId: payLevelId,
                        //     outTradeNo: res.data.orderId,
                        //     outTradeStatus: 1,
                        //     payType: 2,// 1、微信支付 2、余额支付
                        //     outTradeTime: new Date(res.data.createTime.replace(/-/g, '/')).getTime()
                        // };
                        // openPayleMember(data).then((res: any) => {
                        //     if (res.code == 200) {
                        //         uni.navigateTo({
                        //             url: '../pay_success/pay_success'
                        //         });
                        //     }else{
                        //         uni.showToast({
                        //             title: res.msg,
                        //             icon: 'none',
                        //         })
                        //     }
                        // });
                    }else{
                        uni.showToast({
                        	title: res.msg,
                        	icon: 'none',
                        })
						deleteSaveBuy({id:payLevelId}).then(res=>{
							if(res.code==200){
								console.log('删除')
							}
						})
                    }
                }
            } catch (error) {
                uni.hideLoading()
                setTimeout(() => {
                    uni.showToast({
                        title: error.msg,
                        icon: 'none',
                    })
                }, 200)
            }
        },

        //账户信息
        getAccountInfo() {
            uni.showLoading({
                title: '加载中...',
                mask: true
            });
            getAccountInfo({
                tab: 1
            })
                .then((res: any) => {
                    if (res.code == 0) {
                        let data = res.data;
                        data.accountBalance = (data.accountBalance / 100).toFixed(2);
                        data.jiangLiBalance = (data.jiangLiBalance / 100).toFixed(2);
                        this.setData({
                            accountInfo: data,
                            showRecharge: false
                        });
                        uni.hideLoading();
                    }
                })
                .catch((res) => {
                    uni.hideLoading();
                });
        },

        toPaySuccess() {
            // 微信支付
            // if (this.data.payType == 0) {
            //   wx.showToast({
            //     title: '暂时未支持微信支付',
            //     icon: 'none'
            //   })
            // }
            // 余额支付
            let that = this;
            if (this.payType == 0) {
                let payleMemberDetail  = this.payleMemberDetail?Number(this.payleMemberDetail.payLevelPrice) : 0
                let accountBalance = this.accountInfo.accountBalance? Number(this.accountInfo.accountBalance) : 0
                // 判断余额是否足够
                if (payleMemberDetail <= accountBalance) {
                    uni.showModal({
                        title: '提示',
                        content: `确定支付${that.payleMemberDetail.payLevelPrice}元购买会员吗？`,
                        success(res: any) {
                            if (res.confirm) {
                                uni.showLoading({
                                    title: '支付中',
                                    mask: true
                                });
								saveBuy(that.save).then(res => {
									if (res.code == 200) {
                                      that.purchaseMembe();
									}
								})
                            } else if (res.cancel) {
                                console.log('用户点击取消')
                            }
                        }
                    });
                } else {
                    uni.showToast({
                        title: '余额不足请充值',
                        icon: 'none'
                    });
                }
            }
        },

        changePayType(e: any) {
            this.setData({
                payType: e.currentTarget.dataset.type
            });
        }
    }
}

</script>
<style lang="less" scoped>
	@import "../../../../commin/flex.less";
	@import "../../../../commin/commin.less";
	
page {
    line-height: 1;
    background: #F5F7FA;
    padding-bottom: 100rpx;
}

.pay-page {
    padding: 24rpx;

    &__head {
        height: 240rpx;
        background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
        border: 2rpx solid #FFFFFF;
        box-shadow: 4rpx 7rpx 20rpx 0px rgba(166, 171, 179, 0.2400);
        border-radius: 16rpx;
        margin-bottom: 16rpx;

        .head-title {
            font-size: 30rpx;
            font-weight: bold;
            color: #303133;
            margin-bottom: 31rpx;
        }

        .head-price {
            font-size: 30rpx;
            font-weight: bold;
            color: #F0703E;

            text {
                font-size: 72rpx;
            }
        }
    }

    &__types {
        background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
        border: 2rpx solid #FFFFFF;
        box-shadow: 4rpx 7rpx 20rpx 0px rgba(166, 171, 179, 0.2400);
        border-radius: 16rpx;
        padding: 0rpx 32rpx;

        .types-list {
            padding: 40rpx 0;
        }

        .types-title {
            height: 116rpx;
            font-size: 34rpx;
            font-weight: bold;
            color: #303133;
            border-bottom: 1rpx solid #DCDFE6;
            .topay{
              color: #1487FA;
              font-size: 24rpx;
            }
            .arrows_r {
              margin-left: 10rpx;
              .arrows_r(#2D89E7, 12rpx)
            }
        }

        .list-item {
            height: 50rpx;
            margin-bottom: 40rpx;

            &:last-child {
                margin-bottom: 0;
            }
        }

        .item-left {
            .item-icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 16rpx;
            }

            .item-title {
                font-size: 24rpx;
                color: #606266;

                .price {
                    font-weight: bold;
                    color: #F0703E;
                    font-size: 30rpx;

                    text {
                        font-size: 24rpx;
                    }
                }
            }
        }
    }
}

.radio {
    width: 29rpx;
    height: 29rpx;
    border: 1rpx solid #1487FA;
    box-sizing: border-box;
    border-radius: 50%;
    position: relative;

    &.on {
        &::after {
            content: '';
            width: 20rpx;
            height: 20rpx;
            border-radius: 50%;
            background: #1487FA;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
}

.pay-btn-wrap {
    height: 168rpx;
    width: 100%;
    background-color: #F5F7FA;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 40rpx 32rpx;
    box-sizing: border-box;

    .pay-btn {
        height: 88rpx;
        background: linear-gradient(105deg, #268AE8, #1487FA);
        box-shadow: 0px 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3000);
        border-radius: 44rpx;


        font-size: 30rpx;
        font-weight: bold;
        color: #FFFFFF;
    }
}
</style>
